<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			div#hot{
				width:760px;
				margin:100px auto;
				
			}
			div#hot ul li{
				float:left;
				list-style: none;
				border:1px solid lightblue;
			}
			div#hot ul li:after{
				clear: both;
				content: "";
				height:0;
				display: block;
				}
			li.c2{
				width:250px;
				height:362px;
			}
			li.c3{
				width:250px;
				height:180px;
			}
			img.ka{
				margin-top: 130px;
				margin-left:70px ;
			}
			img.c4{
				margin-left:130px ;	
			}
			div.c5 p{
				padding-top: 10px;
				padding-left: 10px;
			}
			img:hover{
				cursor: pointer;
				transform: translateX(-12px);
				transition: all 1s ease-out;
			}
			
		</style>
	</head>
	<body>
		<div id="hot">
			<ul class="c1">
				<li class="c2">
					<div class="c5" >
						<p>超级信用卡</p>
						<p>线上线下课累计彩贝积分</p>
					</div>
					<div>
						<img class="ka" src="./1.bmp" alt="">
					</div>
				</li>
				<li class="c3">
					<div class="c5">
						<p>彩贝抢霸</p>
						<p>每天10点更新</p>
					</div>
					<div>
						<img class="c4" src="./2.bmp" alt="">
					</div>
				</li>
				<li class="c3">
					<div class="c5">
						<p>热门优惠劵</p>
						<p>全场免费领取</p>
					</div>
					<div>
						<img class="c4" src="./3.bmp" alt="">
					</div>
				</li>
				<li class="c3">
					<div class="c5">
						<p>促销活动</p>
						<p>汇集全网优惠</p>
					</div>
					<div>
						<img class="c4" src="./4.bmp" alt="">
					</div>
				</li >
				<li class="c3">
					<div class="c5">
						<p>精挑细选</p>
						<p>给你最好的选择</p>
					</div>
					<div>
						<img class="c4" src="./5.bmp" alt="">
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>